<template>
  <div v-show="visible" class="type-filter-bar">
    <div class="type-filter-item" v-for="(item, i) in dataObj" :key="i" @click="changeSelect(item)">
      <i class="icon-car" :class="'icon-' + item.class">
      </i>
      {{item.title}}
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: ["visible", "dataObj"],
  data() {
    return {};
  },

  computed: {
    filter() {
      return this.$store.getters.filter
    }
  },

  methods: {
    changeSelect(type) {
      console.log(type)
      this.filter.type.push(type)
      this.filter.type = Array.from(new Set(this.filter.type))
      // this.filter.
      this.$store.commit('UPDATE_FILTER', this.filter)
      this.$emit('closeFilter', this.visible)
    }
  }
};
</script>
<style lang='scss' scoped>
.type-filter-bar {
  display: flex;
  flex-wrap: wrap;
}

.type-filter-item {
  width: 33%;
  text-align: center;
  font-size: .14rem;
}
.icon-car {
  display: block;
  width: 70px;
  height: 27px;
  margin: 0 auto 5px;
  background: url(../static/icons.png) no-repeat;
  background-size: 210px auto;
}

.icon-ctwo {
  background-position: 0 -65px;
}

.icon-cthree {
  background-position: -70px -65px;
}

.icon-crun {
  background-position: -140px -65px;
}

.icon-csuv {
  background-position: 0 -94px;
}

.icon-cmpv {
  background-position: -70px -94px;
}
</style>